<template>
  <div>
    <div class="top">

    </div>
    <el-container direction="horizontal">


      <el-header>

        <el-menu>


          <el-menu-item index="2">电影</el-menu-item>
          <el-menu-item index="3" @click="share">视频分享</el-menu-item>
          <el-menu-item index="4" @click="vipview">会员专享</el-menu-item>
          <el-menu-item index="5" @click="alipay">会员抢购</el-menu-item>
          <el-menu-item index="6" @click="hsitory">观看历史</el-menu-item>
        </el-menu>


      </el-header>

    </el-container>
    <template>
      <div>
        <el-button type="primary" icon="el-icon-aim" style="color: red;"></el-button>

        铁蛋儿网热播
      </div>
    </template>
    <template>
      <div class="inputserch">


        <el-input class="el-in" placeholder="请输入内容" v-model="queryItemInfo.query">
          <el-button slot="append" icon="el-icon-search" @click="getInfo"></el-button>
        </el-input>

      </div>
    </template>

    <el-row :gutter="24">

      <el-col :span="6" v-for="item in info" :key="item.id">

        <el-image class="el-img" @click="view(item)" :src="item.url"></el-image>

        <el-menu>
          <el-menu-item @click="view(item)">作者</el-menu-item>
          <el-menu-item v-text="item.auto" @click="view(item)"></el-menu-item>
        </el-menu>
        <el-menu>
          <el-menu-item @click="view(item)">描述</el-menu-item>
          <el-menu-item v-text="item.title" @click="view(item)"></el-menu-item>
        </el-menu>


      </el-col>




    </el-row>
    <el-card>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryItemInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryItemInfo.pageSize"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </el-card>


  </div>

</template>

<script>
  export default {
    data() {
      return {
        info: [],
        queryItemInfo: {
          query: '',
          pageNum: 1,
          pageSize: 12
        },
        total: 0,
        current: 1,



      }
    },
    methods: {
      hsitory(){
        this.$router.push("/history")
      },

      //条数变化时 调用
      handleSizeChange(size) {
        this.queryItemInfo.pageSize = size
        this.getInfo()
      },
      //页码值变化时 调用
      handleCurrentChange(current) {

        this.queryItemInfo.pageNum = current
        this.getInfo()
      },
      vipview() {
        this.$router.push("/vipview")
      },
      async view(item) {
        console.log(item)
        localStorage.setItem("viewaddr", item.viewaddr)
        localStorage.setItem("viewid", item.id)
        await this.$http.post("nono/view/watch/watchLogs",{
          watchAddr:item.viewaddr,
          watchTotal:item.title
        },
        {
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          }
        }
        )
        this.$router.push(`/view`)
      },
      share() {
        this.$router.push("/share")
      },
      alipay() {
        this.$router.push("/alipay")
      },
      async getInfo() {

        const result = await this.$http.get("nono/view/getInfo", {
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          },
          params: this.queryItemInfo
        })
        console.log(result)
        this.info = result.data.data.rows
        console.log(this.info)
        this.total = result.data.data.total

      }

    },
    created() {
      this.getInfo();
    }
  }
</script>

<style>
  .el-img {
    width: 280px;
    height: 280px;
  }

  .inputserch {
    margin: auto;
    width: 500px;
    height: 50px;

  }

  .autosty {
    background-color: #0077AA;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {}

  .bg-purple {}

  .bg-purple-light {}

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .qws {
    width: 500px;
    height: 500px;

  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;

  }

  .el-header {

    color: #333;
    width: 100%;
    text-align: center;
    line-height: 60px;

  }

  .el-menu-item {
    width: 100px;
    float: left;
    font-weight: 300;
    /* background-color: #404040;
    color: #EAFFEA; */
  }

  .top {

    height: 50px;
    width: 100%;
    background-image: url(../assets/images/CSDN浏览器助手_壁纸_1628923576026.png);

  }
</style>
